import PropTypes from 'prop-types'
import React, { memo, useEffect, useState } from 'react'
import { CaretDownFilled, CaretUpFilled, CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'
import { SwitchTransition, CSSTransition } from 'react-transition-group'
import classNames from 'classnames'

import { BrowserWrapper } from './style'
import Indicator from '../indicator'

const PictureBrowser = memo((props) => {
  const { picurls=[], currIndex=0 } = props
  const [currentIndex, setCurrentIndex] = useState(currIndex)
  const [showList, setShowList] = useState(true)
  const [isNext, setIsNext] = useState(true)

  useEffect(() => {
    document.body.style.overflow = "hidden"
    return () => {
      document.body.style.overflow = "auto"
    }
  }, [])


  // 图片轮播 控制上一张下一张
  function controlClickHandler(isNext) {
    // e.stopPropagation(); // 阻止冒泡
    let newIndex = isNext ? (currentIndex + 1) : (currentIndex - 1)
    if (newIndex < 0) newIndex = picurls.length - 1
    newIndex = picurls.length === newIndex ? 0 : newIndex;
    setCurrentIndex(newIndex)
    setIsNext(isNext)

  }
  function indicatorClickHandler(index){
    setIsNext(index>currentIndex)
    setCurrentIndex(index)
  }

  return (
    <BrowserWrapper showList={showList} isNext={isNext}>
      <div className="top">
        <div className="closeBtn" onClick={e => props.ShowBrowserHandler(-1)}>
            <CloseOutlined />
          </div>
      </div>
      <div className="slider">
        <div className="picture">
          {/* {picurls.map(item=>{
            return <img src={item} key={item} alt='' />
          })} */}
          <SwitchTransition mode='out-in'>
            <CSSTransition
              key={picurls[currentIndex]}
              classNames="pic"
              timeout={200}
            >
              <img src={picurls[currentIndex]} alt='' />
            </CSSTransition>
          </SwitchTransition>
        </div>
        <div className="control">
          <div className="left" onClick={e => controlClickHandler(false)} >
            <LeftOutlined />
          </div>
          <div className="right" onClick={e => controlClickHandler(true)}>
            <RightOutlined />
          </div>
        </div>
      </div>
      <div className="preview">
        {/* {picurls.map(item => {
          return <img src={item} key={item} alt='' />
        })} */}
        <div className='info'>
          <div className='desc'>
            <div className='count'>
              <span>{currentIndex + 1}/{picurls.length}：</span>
              <span>room apartment图片{currentIndex + 1}</span>
            </div>
            <div className='toggle' onClick={e => setShowList(!showList)}>
              <span>{showList ? "隐藏" : "显示"}照片列表</span>
              {showList ? <CaretDownFilled /> : <CaretUpFilled />}
            </div>
          </div>
          <div className='list'>
            <Indicator selectIndex={currentIndex}>
              {
                picurls.map((item, index) => {
                  return (
                    <div
                      className={classNames("item", { active: currentIndex === index })}
                      key={item}
                      onClick={e => indicatorClickHandler(index)}
                    >
                      <img src={item} alt="" />
                    </div>
                  )
                })
              }
            </Indicator>
          </div>
        </div>
      </div>
    </BrowserWrapper>
  )
})

PictureBrowser.propTypes = {
  picurls:PropTypes.array,
  currIndex:PropTypes.number
}

export default PictureBrowser